<template>
  <div>
    <div class="orderSearch-wrapper">
      <div class="title">状态提醒</div>
      <el-radio-group size="mini" v-model="searchCarType" style="margin-left: 10px" @change="handleRadio">
        <el-radio-button label="保养"></el-radio-button>
        <el-radio-button label="保险"></el-radio-button>
        <el-radio-button label="证件"></el-radio-button>
        <el-radio-button label="休假"></el-radio-button>
      </el-radio-group>
    </div>
<!--    <div class="percent-wrapper">
      <div class="item">
        <div class="label">{{ getToday }}: {{ this.todayUse }} {{util}}</div>
        <div class="value">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="todayRatio"/>
        </div>
      </div>
      <div class="item">
        <div class="label">{{ getTomorrow }}: {{ this.tomorrowUse }} {{util}}</div>
        <div class="value">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="tomorrowRatio"/>
        </div>
      </div>
    </div>-->
    <div class="carState-wrapper">
      <v-line3 @change="handleBarChange" :source="barSource"/>
    </div>
    <Alert
        v-if="popAlert"
        :state="popAlert"
        :datas="popData"
        @getMdState="popAlert = false"
    />
  </div>
</template>

<script>
import {
  countDriverRemind,
  findDriverOutPercent,
  findCarStatusCount,
  findCarUsePercent
} from "@/api/services/dashboard.service";
import moment from "moment";
import vLine3 from './line3'
import Alert from './alert'
import * as echarts from "echarts";

const state = {
  '证件': 'CARD',
  '休假': 'LEAVE',
  '保养': 'SAFELIVE',
  '保险': 'INSURE',
}
export default {
  name: "carInfoState",
  components: {vLine3, Alert},
  data() {
    return {
      popData: '',
      popAlert: false,
      searchCarType: '保养',// 车辆类型
      barSource: {
        xAxis: [],
        series: []
      },
      getToday:'今日已用车辆',
      getTomorrow:'明日已用车辆',
      todayUse: 0, // 今日已用车辆
      todayRatio: 0,
      tomorrowUse: 0, // 明日已用车辆
      tomorrowRatio: 0,
    }
  },
  watch:{
    searchCarType(newValue) {
      if(this.searchCarType === '保养' || this.searchCarType === '保险' ) {
          this.getToday = '今日已用车辆'
          this.getTomorrow = '明日已用车辆'
      }else {
        this.getToday = '今日出车驾驶员'
        this.getTomorrow = '明日出车驾驶员'
      }
    }
  },
  computed: {
    util() {
      return this.searchCarType === '保养' || this.searchCarType === '保险'? '辆':'人'
    }
  },
  created() {
    // 驾驶员与车辆默认时间30天
    this.dayOutTime = moment().subtract(0, "days").format("YYYY-MM-DD") + " 00:00:00"
    this.tomorrowOutTime = moment().subtract(-29, "days").format("YYYY-MM-DD") + " 23:59:59"
    this._findCarStatusCount()
    // this._findCarUsePercent()
  },
  methods: {
    handleRadio(data) {
      this.searchCarType = data
      this._findCarStatusCount()
      // this._findCarUsePercent()
    },
    _findCarStatusCount() {
      let params = {
        searchType: state[this.searchCarType],
        stime: this.dayOutTime,
        etime: this.tomorrowOutTime
      }
      let fetch = null
      if (this.searchCarType === '保养' || this.searchCarType === '保险') {
        fetch = findCarStatusCount
      } else {
        fetch = countDriverRemind
      }
      fetch(params).then(res => {
        let data = res.data
        const {xAxis, series} = this.normalizeData(data)
        this.barSource = {xAxis, series}
      })
    },


    normalizeData(data) {
      let xAxis = []
      const series = []
      const series_1 = []
      const series_2 = []
      const series_3 = []
      for (let i = 0; i < data.length; i++) {
        xAxis.push(data[i].label)
        // {secpair:二保车辆,repair:维修车辆,inspect:年审车辆, thirdSafe:三者险,carrierSafe:承运险,compulsory:交强险}]
        if (this.searchCarType === '保养') {
          series_1.push(data[i].secpair.length)
          series_2.push(data[i].repair?.length || 0)
          series_3.push(data[i].inspect)
        }
        if (this.searchCarType === '保险') {
          series_1.push(data[i].thirdSafe.length)
          series_2.push(data[i].carrierSafe.length)
          series_3.push(data[i].compulsory.length)
        }
        // {label: '号数’,certi:资格证,driver:驾驶证,bodyTest:体检,leave:请假}]
        if (this.searchCarType === '证件') {
          series_1.push(data[i].certi.length)
          series_2.push(data[i].driver.length)
          series_3.push(data[i].bodyTest.length)
        }
        if (this.searchCarType === '休假') {
          series_1.push(data[i].leave.length)
        }
      }

      if (this.searchCarType === '保养') {
        series.push(this.getSeries(series_1, '二保', '40,220,50'))
        series.push(this.getSeries(series_2, '维修', '249, 193, 78'))
        series.push(this.getSeries(series_3, '年审', '40,222,246'))
      }
      if (this.searchCarType === '保险') {
        series.push(this.getSeries(series_1, '三者险', '40,220,50'))
        series.push(this.getSeries(series_2, '承运险', '249, 193, 78'))
        series.push(this.getSeries(series_3, '交强险', '40,222,246'))
      }
      if (this.searchCarType === '证件') {
        series.push(this.getSeries(series_1, '资格证', '40,220,50'))
        series.push(this.getSeries(series_2, '驾驶证', '249, 193, 78'))
        series.push(this.getSeries(series_3, '体检', '40,222,246'))
      }
      if (this.searchCarType === '休假') {
        series.push(this.getSeries(series_1, '请假', '40,220,50'))
      }
      return {xAxis, series}
    },

    getSeries(data, name, color) {
      return {
        name,
        type: 'line',
        data,
        smooth: true,
        symbolSize: 5,
        label: {
          show: true,
          position: 'top',
          fontSize: 12,
          color: '#8d8d8d'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: `rgba(${color},0.7)`},
            {offset: 1, color: `rgba(${color},0.0)`}
          ])
        },
        itemStyle: {
          normal: {
            color: `rgba(${color},1)`,
            width: 0
          }
        }
      }
    },


    _findCarUsePercent() {
      let fetch = null
      if (this.searchCarType === '保养' || this.searchCarType === '保险') {
        fetch = findCarUsePercent
      } else {
        fetch = findDriverOutPercent
      }
      findCarUsePercent().then(res => {
        this.todayUse = res.todayUse
        this.todayRatio = res.todayRatio
        // 明日已用车辆
        this.tomorrowUse = res.tomorrowUse
        this.tomorrowRatio = res.tomorrowRatio
      })
    },

    handleBarChange(data) {
      return
      let ret = this.barSource.find(item => item.label === data.name)
      let state = {
        'NODRIVER': '无驾驶员',
        'SECPAIR': '二保',
        'REPAIR': '维修',
        'THIRD_SAFE': '三者险',
        'CARRIER_SAFE': '承运人险',
        'LICENSE_INSPECT': '行驶证年审',
      }
      ret.label = state[this.searchCarType] + '-' + ret.label
      this.popData = ret
      this.popAlert = true
    },
  }
}
</script>

<style lang="less" scoped>
.orderSearch-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    color: #3A71A8;
    font-size: 18px;
    padding-left: 10px;
    font-weight: bold;
  }
}

.percent-wrapper {
  display: flex;
  padding: 16px 0 10px 0;
  justify-content: space-between;

  .item {
    width: 49%;
    display: flex;
    padding-top: 10px;

    .label {
      font-size: 14px;
      padding-right: 20px;
    }

    .value {
      flex: 1
    }
  }
}
</style>
